<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="layout doc-header fixed">
	<div class="layout doc-toper">
        <div class="container">
            <div class="line fadein-top">
                <div class="x8 ">欢迎使用递蓝科订餐</div>
                <div class="x4 text-right">
                <c:if test="${user == null }">
                  <a href="#"  class="dialogs" data-toggle="click"  data-mask="1" data-z-index="100" data-width="20%"  data-target="#registerModal" >注册</a>
			      <span class="text-little text-gray">|</span>
			      <a href="#" class="dialogs" data-toggle="click"  data-mask="1" data-z-index="100" data-width="200"  data-target="#loginModal">登录</a>
			      <span class="text-little text-gray">|</span>
			    </c:if>
			    <c:if test="${user !=null }">
			      <span class="padding-right text-white">${user.userName }</span> 
			      <a href="PersonalCenter.nut" class="padding-small-right"><span class="icon-user text-white" ></span> 个人中心</a> 
			      <a href="Logout.nut"><span class="icon-sign-out text-white"></span>退出</a>
			    </c:if>
                </div>
            </div>
        </div>
    </div>

	<div
		class="container-layout padding-small-top padding-small-bottom bg-green bg-inverse ">
		<div class="line">
			<div class="x3 doc-logo">
<!-- 				<button class="button icon-navicon float-right bg-white" -->
<!-- 					data-target="#header-demo4"></button> -->
				<img src="assets/images/logo.png" />
			</div>
			<div class=" x9 doc-nav"
				id="header-demo4">

				<div class="x10">
					<ul class="nav nav-menu nav-inline nav-pills">
						<li <c:if test="${menuName ==null || menuName=='InitUserIndex' }">class="active"</c:if>><a href="InitUserIndex.nut">首页</a></li>
				        <c:if test="${user != null && 'admin' == user.userid}">
				        <li <c:if test="${menuName=='OrdersCalendarManager' }">class="active"</c:if>><a href="OrdersCalendarManager.nut">订单管理</a></li>
				        <li <c:if test="${menuName=='UserManager' }">class="active"</c:if>>
				            <a href="UserManager.nut">用户管理</a>
				        </li>
				        <li <c:if test="${menuName=='ShopManager' }">class="active"</c:if>><a href="ShopManager.nut">店铺管理</a></li>
				        <li <c:if test="${menuName=='SymNoticeManager' }">class="active"</c:if>><a href="SymNoticeManager.nut">公告管理</a></li>
<%-- 				        <li <c:if test="${menuName=='' }">class="active"</c:if>><a href="#about">关于我们</a></li> --%>
				        </c:if>
					</ul>
				</div>
				<div class="hidden-s hidden-m x2">
					<div class="x12 text-red">83862997</div>
					<div class="x12 text-small">
						<a href="#" class="win-homepage">设为首页</a> | <a href="#"
							class="win-favorite">加入收藏</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<!-- Login Modal -->
<div class="modal-dialog" id="loginModal">
    <div class="dialog fadein-top">
        <div class="modal-content">
            <div class="dialog-head">
                <span class="close rotate-hover "></span>
                <strong>用户登陆</strong>
            </div>
            <div class="dialog-body">
                <div class="login-form" id="login">
                    <div class="form-group">
                        <input type="text" class="input radius-rounded" id="login-name" name="userid" placeholder="用户名" />
                    </div>

                    <div class="form-group">
                        <input type="text" class="input radius-rounded"  id="login-pass" name="password" placeholder="密码" />
                    </div>
                </div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="button bg-green" id="loginBut">登陆</button>
            </div>
        </div>
    </div>
</div>

<!-- / Login Modal -->

<!-- Register Modal -->
<div class="modal-dialog" id="registerModal" >
    <div class="dialog fadein-top">
        <div class="modal-content">
            <div class="dialog-head">
                <span class="close rotate-hover "></span>
                <strong>用户注册</strong>
            </div>
            <div class="dialog-body">
                <form action="UserRegist.nut" id="regsitUserForm" method="post">
                    <div class="form-inline">
                        <div class="input-group " style="margin: 10px 0px;">
                            <label class="addon">用户名：</label> 
                            <input type="text"
                                class="input radius-none" id="login-name" name="userid" />
                        </div>

                        <div class="input-group" style="margin: 10px 0px;">
                            <label class="addon">密　码：</label> 
                            <input
                                type="password" class="input radius-none" 
                                id="login-pass" name="passWord"/>
                        </div>
                        
                        <div class="input-group " style="margin: 10px 0px;">
                            <span class="addon">姓　名：</span> 
                            <input type="text"
                                class="input radius-none" id="login-username" name="userName"/>
                        </div>
                        
                        <div class="input-group" style="margin: 10px 0px;">
                            <span class="addon">部　门：</span>
                            <div>
                                <select id="basic"
                                    class="selectpicker show-tick input radius-none"
                                    data-live-search="true" name="department">
                                    <optgroup label="简洛" data-subtext="another test">
                                        <option value="总工办">总工办</option>
                                        <option value="开发一部">开发一部</option>
                                        <option value="开发二部">开发二部</option>
                                        <option value="开发三部">开发三部</option>
                                        <option value="开发四部">开发四部</option>
                                        <option value="开发四部">开发五部</option>
                                        <option value="解决方案">解决方案</option>
                                        <option value="运维支持部">运维支持部</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="dialog-foot">
                <button type="button" class="button bg-green" id="userSubmitBut">提交</button>
            </div>
        </div>
    </div>
</div>

<!-- / Register Modal -->
<script type="text/javascript">
    $(function() {
        $("#loginBut").click(function(){
            var userid = $(" input[name='userid']").val();
            var passWord = $(" input[name='password']").val();
            $.getJSON("Login.nut", {"userid" : userid, "password" : passWord}, function(data) {
                if ("0" == data.success) {
                    var alertMess = "<div name=\"alertMessage\" class=\"alert alert-red\" role=\"alert\">";
                    alertMess += "<span class=\"close rotate-hover\"></span>";
                    alertMess += "<strong>警告!</strong>" + data.message;
                    alertMess += "</div>";
                    $('div[name="alertMessage"]').remove()
                    $(alertMess).insertBefore("#loginBut");
                    $('.alert .close').each(function(){
                        $(this).click(function(){
                            $(this).closest('.alert').remove();
                        });
                    });
                } else {
                    $('div[name="alertMessage"]').remove()
                    window.location.href = "InitUserIndex.nut";
                }
            });
        });
        
        function checkForm(obj, userid, passWord, userName, department){
            if (userid == "") {
                var alertMess ="<div name=\"alertMessage\" class=\"alert alert-red\" role=\"alert\">";
                alertMess += "<span class=\"close rotate-hover\"></span>";
                alertMess += "<strong>警告!</strong>用户名不能为空.";
                alertMess += "</div>";
                $('div[name="alertMessage"]').remove()
                $(alertMess).insertBefore(obj);
                return false;
            }
             if (passWord == "") {
                var alertMess ="<div name=\"alertMessage\" class=\"alert alert-red\" role=\"alert\">";
                alertMess += "<span class=\"close rotate-hover\"></span>";
                alertMess += "<strong>警告!</strong>密码不能为空.";
                alertMess += "</div>";
                $('div[name="alertMessage"]').remove()
                $(alertMess).insertBefore(obj);
                return false;
            }
            if (userName == "") {
                var alertMess ="<div name=\"alertMessage\" class=\"alert alert-red\" role=\"alert\">";
                alertMess += "<span class=\"close rotate-hover\"></span>";
                alertMess += "<strong>警告!</strong>姓名不能为空.";
                alertMess += "</div>";
                $('div[name="alertMessage"]').remove()
                $(alertMess).insertBefore(obj);
                return false;
            }
            if (department == "") {
                var alertMess ="<div name=\"alertMessage\" class=\"alert alert-red\" role=\"alert\">";
                alertMess += "<span class=\"close rotate-hover\"></span>";
                alertMess += "<strong>警告!</strong>部门不能为空.";
                alertMess += "</div>";
                $('div[name="alertMessage"]').remove()
                $(alertMess).insertBefore(obj);
                return false;
            }
            return true;
        }
        
        $("#userSubmitBut").click(function(){
            var userid = $(" #registerModal input[name='userid']").val();
            var passWord = $(" #registerModal input[name='passWord']").val();
            var userName = $(" #registerModal input[name='userName']").val();
            var department = $(" #registerModal input[name='department']").val();
            
            if (!checkForm(" #userSubmitBut", userid, passWord, userName, department)) {
            	$('.alert .close').each(function(){
                    $(this).click(function(){
                        $(this).closest('.alert').remove();
                    });
                });
                return;
            }
            
            $.getJSON("checkUserExists.nut", {"userid":userid}, function(data){
                if ("0" == data.message){
                    var alertMess ="<div name=\"alertMessage\" class=\"alert alert-red\" role=\"alert\">";
                    alertMess += "<span class=\"close rotate-hover\"></span>";
                    alertMess += "<strong>警告!</strong>用户已存在.";
                    alertMess += "</div>";
                    $('div[name="alertMessage"]').remove()
                    $(alertMess).insertBefore("#userSubmitBut");
                    $('.alert .close').each(function(){
                        $(this).click(function(){
                            $(this).closest('.alert').remove();
                        });
                    });
//                  $(".login-form").append(alert);
                } else {
                    $('div[name="alertMessage"]').remove()
                    $('#regsitUserForm').submit();
                }
            });
        });
    })
</script>